<!DOCTYPE html>
<html lang="en">

<head>
    <title>文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>


<body>
<form enctype="multipart/form-data" method="post"  action="/uploads">
    文件:<input type="file" name="head_img" id="head_img"/> 姓名:<input type="text" name="name" />
    <img src="" id="img0" width="120" class="hide">
    <input type="submit" value="上传" />
</form>
<script type="text/javascript">
    $("#head_img").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        alert("objUrl = "+objUrl) ;
        if (objUrl)
        {
            $("#img0").attr("src", objUrl);
            $("#img0").removeClass("hide");
        }
    })
    function getObjectURL(file)
    {
        var url = null ;
        if (window.createObjectURL!=undefined)
        { // basic
            url = window.createObjectURL(file) ;
        }
        else if (window.URL!=undefined)
        {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        }
        else if (window.webkitURL!=undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
</body>
</html>